<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘好货 - 支付</title>
    <script src="/static/css/tailwindcss.css"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF4400',
                        secondary: '#FFB800',
                        dark: '#333333',
                        light: '#F5F5F5',
                        muted: '#666666',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .payment-method {
                @apply border-2 rounded-lg p-4 flex items-center transition-all duration-300 cursor-pointer;
            }

            .payment-method.active {
                @apply border-primary bg-primary/5;
            }

            .card-flip {
                perspective: 1000px;
                transform-style: preserve-3d;
            }

            .card-front, .card-back {
                backface-visibility: hidden;
                transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

            .card-back {
                transform: rotateY(180deg);
            }

            .card-flip:hover .card-front {
                transform: rotateY(180deg);
            }

            .card-flip:hover .card-back {
                transform: rotateY(0deg);
            }

            .address-card {
                @apply border-2 rounded-lg p-4 transition-all duration-300 cursor-pointer;
            }

            .address-card.active {
                @apply border-primary bg-primary/5;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-dark">
<div id="app">
    <!-- 导航栏 -->
    <navigation></navigation>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 进度指示器 -->
        <div class="mb-12">
            <div class="flex items-center justify-between max-w-3xl mx-auto">
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mb-2">
                        <i class="fa fa-shopping-cart"></i>
                    </div>
                    <span class="text-sm font-medium">购物车</span>
                </div>
                <div class="flex-1 h-1 bg-gray-200 mx-2">
                    <div class="h-full bg-primary" style="width: 100%"></div>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mb-2">
                        <i class="fa fa-truck"></i>
                    </div>
                    <span class="text-sm font-medium">结算</span>
                </div>
                <div class="flex-1 h-1 bg-gray-200 mx-2">
                    <div class="h-full bg-primary" style="width: 100%"></div>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mb-2">
                        <i class="fa fa-credit-card"></i>
                    </div>
                    <span class="text-sm font-medium text-primary font-bold">支付</span>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 支付信息 -->
            <div class="lg:col-span-2 space-y-8">
                <!-- 订单信息 -->
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h2 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa fa-info-circle text-primary mr-2"></i> 订单信息
                    </h2>

                    <div class="space-y-4">
                        <template v-if="products && products.length > 0">
                            <div v-for="item in products" :key="item.id" class="flex pb-4 border-b border-gray-100">
                                <img :src="item.image || 'https://picsum.photos/200/200'" alt="商品图片"
                                     class="w-20 h-20 object-cover rounded-md">
                                <div class="ml-4 flex-1">
                                    <h3 class="text-sm font-medium text-gray-900 line-clamp-2">{{ item.name }}</h3>
                                    <div class="flex justify-between items-center mt-2">
                                        <div>
                                            <span class="text-primary font-medium">¥{{ formatPrice(item.price) }}</span>
                                            <span class="text-gray-500 text-sm ml-2">x{{ item.quantity }}</span>
                                        </div>
                                        <span class="text-gray-600">小计: ¥{{ formatPrice(item.subtotal) }}</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <div v-else class="py-8 text-center">
                            <i class="fa fa-shopping-cart text-gray-300 text-5xl mb-4"></i>
                            <p class="text-gray-500">
                                没有可支付的商品，将在 <span
                                    class="text-primary font-medium animate-pulse">{{ countdown }}</span> 秒后自动跳转
                            </p>
                            <a href="/cart" class="inline-block mt-4 text-primary font-medium hover:underline">
                                <i class="fa fa-arrow-left mr-1"></i> 立即返回购物车
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 收货地址 -->
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h2 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa fa-map-marker text-primary mr-2"></i> 收货地址
                    </h2>

                    <div v-if="address && address.recipient_name" class="bg-gray-50 rounded-lg p-4">
                        <div class="flex justify-between mb-2">
                            <span class="font-medium">{{ address.recipient_name }}</span>
                            <span class="font-medium">{{ address.recipient_phone }}</span>
                        </div>
                        <p class="text-sm text-muted">{{ address.shipping_address }}</p>
                    </div>
                    <div v-else class="text-center py-4 text-gray-500">
                        <i class="fa fa-exclamation-circle mr-2"></i> 未选择收货地址
                    </div>
                </div>

                <!-- 支付方式 -->
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h2 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa fa-credit-card text-primary mr-2"></i> 选择支付方式
                    </h2>

                    <div class="space-y-4">
                        <!-- 苹果支付 -->
                        <div class="payment-method" :class="{ 'active': selectedPaymentMethod === 'apple' }"
                             @click="selectPaymentMethod('apple')">
                            <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mr-4">
                                <i class="fa fa-apple text-gray-500 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">苹果支付</h3>
                                <p class="text-sm text-gray-500">使用苹果支付</p>
                            </div>
                            <div class="ml-auto">
                                <div class="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center"
                                     :class="{ 'border-primary bg-primary': selectedPaymentMethod === 'apple' }">
                                    <div class="w-3 h-3 rounded-full bg-white"
                                         v-if="selectedPaymentMethod === 'apple'"></div>
                                </div>
                            </div>
                        </div>

                        <!-- 微信支付 -->
                        <div class="payment-method" :class="{ 'active': selectedPaymentMethod === 'wechat' }"
                             @click="selectPaymentMethod('wechat')">
                            <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center mr-4">
                                <i class="fa fa-weixin text-green-500 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">微信支付</h3>
                                <p class="text-sm text-gray-500">使用微信支付</p>
                            </div>
                            <div class="ml-auto">
                                <div class="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center"
                                     :class="{ 'border-primary bg-primary': selectedPaymentMethod === 'wechat' }">
                                    <div class="w-3 h-3 rounded-full bg-white"
                                         v-if="selectedPaymentMethod === 'wechat'"></div>
                                </div>
                            </div>
                        </div>

                        <!-- 银行卡支付 -->
                        <div class="payment-method" :class="{ 'active': selectedPaymentMethod === 'card' }"
                             @click="selectPaymentMethod('card')">
                            <div class="w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center mr-4">
                                <i class="fa fa-credit-card text-gray-500 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">银行卡支付</h3>
                                <p class="text-sm text-gray-500">使用储蓄卡/信用卡支付</p>
                            </div>
                            <div class="ml-auto">
                                <div class="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center"
                                     :class="{ 'border-primary bg-primary': selectedPaymentMethod === 'card' }">
                                    <div class="w-3 h-3 rounded-full bg-white"
                                         v-if="selectedPaymentMethod === 'card'"></div>
                                </div>
                            </div>
                        </div>

                        <!-- 银行卡支付表单 -->
                        <div v-if="selectedPaymentMethod === 'card'" class="mt-6 bg-gray-50 rounded-lg p-6">
                            <h3 class="text-base font-medium mb-4">银行卡信息</h3>

                            <!-- 模拟银行卡 -->
                            <div class="card-flip relative w-full max-w-md h-48 mb-6">
                                <!-- 卡正面 -->
                                <div class="card-front absolute w-full h-full bg-gradient-to-r from-blue-600 to-blue-800 rounded-xl shadow-lg p-6 text-white">
                                    <div class="h-8 flex items-center justify-between mb-4">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 rounded-full bg-white/20 mr-2"></div>
                                            <div class="w-8 h-8 rounded-full bg-white/40"></div>
                                        </div>
                                        <i class="fa fa-wifi transform -rotate-90 text-xl"></i>
                                    </div>

                                    <div class="mb-4">
                                        <p class="text-xs text-white/70 mb-1">卡号</p>
                                        <p class="text-lg tracking-widest">**** **** **** 4242</p>
                                    </div>

                                    <div class="grid grid-cols-2 gap-4">
                                        <div>
                                            <p class="text-xs text-white/70 mb-1">持卡人</p>
                                            <p>{{ address ? address.recipient_name : '持卡人姓名' }}</p>
                                        </div>
                                        <div>
                                            <p class="text-xs text-white/70 mb-1">有效期</p>
                                            <p>05/25</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- 卡背面 -->
                                <div class="card-back absolute w-full h-full bg-gradient-to-r from-blue-700 to-blue-900 rounded-xl shadow-lg">
                                    <div class="h-10 bg-black mt-4"></div>
                                    <div class="h-10 bg-white/70 mt-6 flex items-center justify-end px-4">
                                        <p class="text-black font-medium">321</p>
                                    </div>
                                    <div class="mt-6 px-6">
                                        <p class="text-xs text-white/70">本银行卡仅供支付演示使用</p>
                                    </div>
                                </div>
                            </div>

                            <!-- 表单 -->
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">卡号</label>
                                    <input type="text" placeholder="**** **** **** ****"
                                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                </div>

                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">有效期</label>
                                        <input type="text" placeholder="MM/YY"
                                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">安全码</label>
                                        <input type="text" placeholder="CVV"
                                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">持卡人姓名</label>
                                    <input type="text"
                                           :placeholder="address ? address.recipient_name : '请输入持卡人姓名'"
                                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 订单摘要 -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-md p-6 sticky top-24">
                    <h2 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa fa-calculator text-primary mr-2"></i> 订单摘要
                    </h2>

                    <!-- 价格汇总 -->
                    <div class="space-y-3 text-sm mb-6">
                        <div class="flex justify-between">
                            <span class="text-gray-600">商品总价</span>
                            <span>¥{{ formatPrice(subtotal) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">运费</span>
                            <span v-if="subtotal > 0">¥{{ formatPrice(shippingFee) }}</span>
                            <span v-else>¥0.00</span>
                        </div>
                        <div class="flex justify-between" v-if="couponDiscount > 0">
                            <span class="text-gray-600">优惠券</span>
                            <span class="text-green-500">-¥{{ formatPrice(couponDiscount) }}</span>
                        </div>
                        <div class="border-t border-gray-100 pt-3 flex justify-between font-medium">
                            <span>实付款</span>
                            <span class="text-lg text-primary font-bold">¥{{ formatPrice(totalAmount) }}</span>
                        </div>
                    </div>

                    <!-- 支付按钮 -->
                    <button class="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors"
                            @click="payNow"
                            :disabled="!products || products.length === 0 || !address">
                        立即支付 ¥{{ formatPrice(totalAmount) }}
                    </button>

                    <!-- 其他信息 -->
                    <div class="mt-6 text-xs text-gray-500">
                        <p class="mb-2">支付后预计3-5个工作日送达</p>
                        <p>支付完成后将发送确认邮件至您的邮箱</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <app-footer></app-footer>

    <!-- 支付成功模态框 -->
    <div v-if="paymentSuccess" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
        <div class="bg-white rounded-xl shadow-xl p-8 max-w-md w-full mx-4 transform transition-all">
            <div class="text-center">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-check text-green-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-2">支付成功</h3>
                <p class="text-gray-600 mb-6">您的订单已支付成功，我们将尽快为您发货</p>
                <div class="flex justify-center space-x-4">
                    <button class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
                            @click="goToIndex">
                        继续购物
                    </button>
                    <button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
                            @click="goToOrderDetail">
                        查看订单
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/static/js/vue.js"></script>
<script src="/static/js/top.js"></script>
<script src="/static/js/foot.js"></script>
<script src="/static/js/message.js"></script>
<script src="/static/js/common.js"></script>
<script>
    // Vue实例
    new Vue({
        el: '#app',
        data: {
            util,
            orderId: 0,
            selectedPaymentMethod: 'wechat', // 默认选中微信支付
            paymentSuccess: false,
            address: null,
            products: null,
            subtotal: 0,
            totalAmount: 0,
            shippingFee: 0,
            couponDiscount: 0,
            countdown: 5, // 倒计时秒数
            redirectTimer: null, // 定时器ID
            isLoading: false
        },
        methods: {
            async loadOrder() {
                this.isLoading = true;
                try {
                    const response = await fetch(`/orders/${this.orderId}`);
                    if (response.ok) {
                        const res = await response.json();
                        this.address = res.data.address || null;
                        this.products = res.data.products || [];
                        this.subtotal = parseFloat(res.data.subtotal) || 0;
                        this.totalAmount = parseFloat(res.data.total_amount) || 0;
                        this.shippingFee = parseFloat(res.data.shipping_fee) || 0;
                        this.couponDiscount = parseFloat(res.data.coupon_discount) || 0;
                    } else {
                        const error = await response.json();
                        message.error(error.message);
                        this.startCountdown();
                    }
                } catch (error) {
                    message.error('网络请求错误，请重试');
                    this.startCountdown();
                } finally {
                    this.isLoading = false;
                }
            },
            async payOrder() {
                try {
                    const response = await fetch(`/orders/${this.orderId}/pay`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            'payment_method': this.selectedPaymentMethod
                        })
                    });
                    if (!response.ok) {
                        const error = await response.json();
                        message.error(error.message);
                    }
                } catch (error) {
                    message.error('网络请求错误，请重试');
                    this.startCountdown();
                }
            },
            selectPaymentMethod(method) {
                this.selectedPaymentMethod = method;
            },

            formatPrice(price) {
                return (parseFloat(price) || 0).toFixed(2);
            },

            startCountdown() {
                this.stopCountdown();
                this.countdown = 5;
                this.redirectTimer = setInterval(() => {
                    if (this.countdown <= 0) {
                        window.location.href = '/cart';
                    } else {
                        this.countdown--;
                    }
                }, 1000);
            },

            stopCountdown() {
                if (this.redirectTimer) {
                    clearInterval(this.redirectTimer);
                    this.redirectTimer = null;
                }
            },

            payNow() {
                if (!this.products || this.products.length === 0) {
                    message.error('没有可支付的商品');
                    return;
                }

                if (!this.address) {
                    message.error('请选择收货地址');
                    return;
                }

                const button = event.target;
                const originalText = button.innerHTML;
                button.disabled = true;
                button.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 支付中...';

                setTimeout(() => {
                    button.innerHTML = originalText;
                    button.disabled = false;
                    this.paymentSuccess = true;

                    this.payOrder();

                    this.stopCountdown();
                }, 1500);
            },

            goToIndex() {
                this.paymentSuccess = false;
                window.location.href = '/';
            },

            goToOrderDetail() {
                this.paymentSuccess = false;
                window.location.href = '/order';
            }
        },
        created() {
            util.store.set("return-url", location.href);
            if (this.util.isLogin()) {
                const urlParams = new URLSearchParams(window.location.search);
                this.orderId = urlParams.get('order_id');
                if (this.orderId) {
                    this.loadOrder();
                } else {
                    this.startCountdown();
                }
            } else {
                location.href = '/login';
            }
        },
        beforeDestroy() {
            this.stopCountdown();
        }
    });
</script>
</html>